<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
    </ul>
</body>
<script>


    var obj = {
        a: 'a1',
        b: 'b1',
        obbj: { a: 'a1', b: 'b1' }
    }
    var newObj = { ...obj }

    console.log(obj, newObj, obj === newObj)
    console.log('-----------------------------')


    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    var brr = ['a', 'b', 'c']
    var newArr = [...arr, ...brr]
    console.log(newArr)
    console.log('-----------------------------')


    var str = 'abcdef'
    var newStr = [...str]
    console.log(newStr)
    console.log('-----------------------------')


    var a = { a: 1 }
    var b = { b: 2 }
    var c = { c: 3, a: 4 }
    var o = { ...a, ...b, ...c }
    console.log(o)
    console.log('-----------------------------')


    // var liList = document.querySelectorAll(".list li")
    // var list = Array.from(liList)
    // console.log(list, Array.isArray(list))
    var list = [...document.querySelectorAll(".list li")]
    console.log(list, Array.isArray(list))
    console.log('-----------------------------')

    var s = new Set()
    s.add(1).add(4).add(7)
    var list = [...s]
    console.log(list)
    console.log('-----------------------------')


    var m = new Map()
    m.set(100, 200)
    m.set("hello", "world")
    m.set(true, false)
    var list = [...m]
    console.log(list)




</script>

</html>